【Hexo博客系列】No.1 搭建Hexo博客，快速简洁高效，零成本搭建个人博客：Hexo + GitHub Pages + Cloudflare Pages 完整指南

【Hexo博客系列】No.1 搭建Hexo博客，快速简洁高效，零成本搭建个人博客：Hexo + GitHub Pages + Cloudflare Pages 完整指南

简介

本文详细介绍了如何使用 Hexo 框架搭建一个个人博客，并将其部署到 GitHub Pages 和 Cloudflare Pages 上。

主要内容包括：

  • 环境准备：安装 Node.js 和 Git
  • 配置 Git 和 GitHub：设置 SSH 密钥，创建 GitHub 仓库
  • 初始化 Hexo 项目：安装 Hexo，创建新博客
  • 部署到 GitHub Pages：配置部署设置，推送静态文件
  • 部署到 Cloudflare Pages：连接 GitHub 仓库，自动部署
  • 基本使用方法：创建新文章，本地预览，发布更新

适合想要快速搭建个人博客、追求高效和零成本的你！

1. 事前准备

  • 域名（非必须，可用免费域名或 GitHub.io/Pages.dev 分配的域名）
  • GitHub（必须，需注册 GitHub 账号）
  • Cloudflare（非必须，注册后可用 CF CDN 加速，也可直接用 GitHub.io 域名）

2. 软件支持

  • Node.js（必须）
  • Git（必须）
  • VSCode（非必须，推荐使用的代码编辑器）

2.1 安装 Node.js

  • 访问 Node.js 官网 下载与你系统匹配的安装包。
  • 安装目录可用默认值 C:/Program Files/nodejs/
  • 安装完成后，打开命令行（Win+R 输入 cmd 回车），输入：
1
node -v

看到版本号即安装成功。

  • 建议更换 npm 源为华为云镜像，加速依赖下载：
1
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

2.2 安装 Git

  • 访问 Git 官网 下载并安装。
  • 安装目录建议默认。
  • 安装后可见：
    • Git CMD（Windows 命令行风格）
    • Git Bash（Linux 命令行风格，推荐）
    • Git GUI（图形界面，不推荐新手使用）

3. 配置 Git 密钥并连接至 GitHub

常用 Git 命令

1
2
3
git config -l                # 查看所有配置
git config --system --list   # 查看系统配置
git config --global --list   # 查看用户（全局）配置

3.1 配置用户名和邮箱

1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

用 git config -l 检查是否配置成功。

3.2 配置公钥连接 GitHub

生成 SSH 公钥：

1
ssh-keygen -t rsa -C "你的邮箱"

一路回车即可。

  • 打开 C 盘用户文件夹下的 .ssh 文件夹，找到 id_rsa（私钥）和 id_rsa.pub（公钥）。
  • 用记事本打开 id_rsa.pub，复制内容。
  • 登录 GitHub，进入 Settings → SSH and GPG keys，新建 Key，粘贴公钥。

测试连接：

1
ssh -T git@github.com

首次连接输入 yes，出现账户信息即成功。

3.3 创建 GitHub.io 仓库

  • 点击 GitHub 右上角 + → New repository
  • 仓库名格式：<用户名>.github.io（必须）
  • 可见性选 Public
  • 创建即可

4. 初始化 Hexo 博客

  • 新建文件夹保存博客源码（如 D:/Hexo-Blog），右键选择 Open Git Bash here
  • 安装 Hexo：
1
npm install -g hexo-cli && hexo -v
  • 初始化 Hexo 项目并安装依赖：
1
2
3
hexo init blog-demo
cd blog-demo
npm i

  • 目录结构说明：

    • node_modules：依赖包
    • scaffolds：文章模板
    • source：存放文章
    • themes：主题
    • .npmignore、_config.landscape.yml、config.yml、package.json 等

  • 启动项目：

1
hexo cl && hexo s

5. 将静态博客挂载到 GitHub Pages

  • 安装部署插件：
1
npm install hexo-deployer-git --save
  • 修改 blog-demo/_config.yml，在末尾添加或修改：
1
2
3
4
deploy:
  type: git
  repository: git@github.com:你的用户名/你的用户名.github.io.git
  branch: main
  • 部署到 GitHub（Hexo 三连）：

// Git BASH 终端

1
hexo clean && hexo generate && hexo deploy

或者 // VSCode 终端

1
hexo cl; hexo g; hexo d
  • 各命令说明：
    • hexo clean（hexo cl）：清理生成文件
    • hexo generate（hexo g）：生成静态文件
    • hexo deploy（hexo d）：部署到远程仓库

⚠️ 注意：deploy 时可能需要输入 GitHub 用户名和密码。

  • 出现 Deploy done 即部署成功。
  • 稍等片刻，访问 https://你的用户名.github.io 查看博客。

6. 将静态博客挂载到 Cloudflare Pages

  • 在 Cloudflare 后台选择 Workers 和 Pages → Pages → 连接到 Git
  • 登录 GitHub 账号，选择博客仓库
  • 点击 保存并部署，等待部署完成
  • 成功后访问 https://你的用户名-github-io.pages.dev 查看博客
  • 可将 GitHub.io 仓库设为 Private
  • 可绑定自定义域名

7. 博客日常使用

新建一篇博文

1
hexo new 这是一篇新的博文
  • 编辑 _posts/这是一篇新的博文.md，用 Markdown 格式书写。
  • 详细写作方法见 Hexo 官方文档

本地预览

// Git BASH 终端

1
hexo cl && hexo s

或者 // VSCode 终端

1
hexo cl; hexo s

发布到 GitHub

// Git BASH 终端

1
hexo cl && hexo g && hexo d

或者 // VSCode 终端

1
hexo cl; hexo g; hexo d

8. VSCODE 终端首次执行报错

如遇权限报错，管理员身份打开 PowerShell，输入：

1
Set-ExecutionPolicy RemoteSigned

参考资料

[up主专用，视频内嵌代码贴在这]